import { useCallback, useEffect, useState } from "react";
import { useExportTask } from "@/views/hooks/useExportTask";
import ProgressModal from "@/views/components/UIModal/ProgressModal";
import DownloadModal from "@/views/components/UIModal/DownloadModal";

/**
 * 导出表格
 *
 *
 *  */
function ActionModal(props) {
	// {"businessParam":"{\"skuParam\":{},\"businessKey\":2}","taskType":3002}
	const { onCancel, createTaskData } = props;

	const [visible, setVisible] = useState("ProgressModal");

	const { percent, step, handleDownload, startTask } = useExportTask();

	useEffect(() => {
		startTask(createTaskData);
	}, []);

	useEffect(() => {
		if (step.second === true) {
			setVisible("DownloadModal");
		}
		if (step.first === false || step.second === false || step.third === true) {
			onCancel();
		}
	}, [step]);

	return (
		<>
			<ProgressModal
				visible={visible === "ProgressModal"}
				type="progress"
				percent={percent}
				msg="正在导出商品，请等待..."
				cancelText="跳过等待"
				onCancel={() => {
					{
						onCancel();
						clearTimer();
					}
				}}
			/>
			<DownloadModal visible={visible === "DownloadModal"} onCancel={onCancel} onOk={handleDownload} />
		</>
	);
}

export default ActionModal;
